<template>
  <div class="songItem" :style="{
              color: item.id == $root.musicStore.musicID ? '#d464f0' : '',
            }">
    <div class="num"><slot></slot></div>
    <div class="left">
      <h4 v-html="$options.filters.highLight(item.name, keywords)"></h4>
      <p>
        <i class="u-hmsprt"></i>
        <template v-if="item.song">
          <span
            v-html="
              $options.filters.highLight(item.song.artists[0].name, keywords)
            "
          ></span>
        </template>
        <template v-if="item.artists">
          <span
            v-html="$options.filters.highLight(item.artists[0].name, keywords)"
          ></span>
        </template>
        - <span v-html="$options.filters.highLight(item.name, keywords)"></span>
      </p>
      <span class="playbtn" @click="play(item)"></span>
    </div>
  </div>
</template>

<script>
export default {
  name: "SongItem",
  props: ["item", "keywords"],
  filters: {
    highLight(val, keywords) {
      if (typeof keywords == "undefined") {
        return val;
      }
      let reg = new RegExp(keywords, "g");
      if (reg.test(val)) {
        return val.replace(
          reg,
          "<span class='highlight'>" + keywords + "</span>"
        );
      }
      return val;
    },
  },
  methods: {
    play(item) {
      // 触发父组件play
      // this.$emit('play',item.id);
      this.$root.musicStore.musicID = item.id;
      this.$root.musicStore.currentMusic = item;
      this.$root.musicStore.picURL = item.picUrl?item.picUrl:item.al.picUrl;
      // console.log(this.$root.musicStore.musicList);
      let newArr = this.$root.musicStore.musicList;
     
      let find = false;
      for (let n of newArr) {
        // 当前音乐在歌单存在
        if (n.id == item.id) {
          find = true;
          break;
        }
      }
      if (!find) newArr.push(item);
      
      this.$root.musicStore.musicList = newArr;
      // console.log(this.$root.musicStore.musicList);
      // 把当前播放列表全部加入播放歌曲列表
      this.$emit("add-list");
    },
  },
};
</script>

<style lang="less">
.songItem {
  display: flex;
  align-items: center;
  padding: 4px 0px;
  .num {
    padding: 0 8px;
    color: #999999;
    font-size: 17px;
  }
  .left {
    flex: 1;
    width: 90%;
    margin: 0px;
    border-bottom: 1px solid #eee;
    padding-bottom: 6px;
    position: relative;
    h4 {
      // color: #333;
      margin: 4px 0px;

      width: 88%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    p {
      color: #aaa;
      font-size: 12px;
      display: inline-block;
      width: 88%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      .u-hmsprt {
        background: url(../assets/index_icon.png) no-repeat;
        background-size: 166px 97px;
        display: inline-block;
        width: 12px;
        height: 8px;
        margin-right: 4px;
      }
    }
    .playbtn {
      background: url(../assets/index_icon.png) no-repeat;
      width: 22px;
      height: 22px;
      background-size: 166px 97px;
      background-position: -24px 0px;
      margin-right: 8px;
      display: inline-block;
      position: absolute;
      top: 10px;
      right: 2px;
    }
  }
  .highlight {
    color: #d464f0;
  }
}
</style>